<template>
  <div class="home">
    <!-- 首页的头部布局 -->
    <header>
      <van-row type="flex" justify="center">
        <van-col :span="6">
          <span class="logo">积云头条</span>
        </van-col>
        <van-col :span="18">
          <van-button icon="search" size="small" round @click="$router.push('/search')">搜索</van-button>
        </van-col>
      </van-row>
    </header>
    <!-- 首页的头部布局 -->
    <!-- 频道列表布局 -->
    <van-tabs color="#3196fa" border v-model="active">
      <!-- 选项卡的每一个选项 -->
      <van-tab
        v-for="channel in channels_list"
        :title="channel.name"
        :key="channel.id"
        title-style="font-size:16px;"
      >
        <!-- 选项的具体内容 -->
        <articleList :channel="channel" />
        <!-- 选项的具体内容 -->
      </van-tab>
      <!-- 右侧菜单按钮显示编辑的弹框内容 -->
      <div slot="nav-right" class="nav-right" @click="isShow = true">
        <van-icon name="wap-nav" size="30" />
      </div>
    </van-tabs>
    <!-- 频道列表布局 -->

    <!-- 频道编辑的盒子内容 -->
    <van-popup
      v-model="isShow"
      position="bottom"
      :style="{ height: '100%' }"
      closeable
      close-icon-position="top-left"
    >
      <!-- 头部导航栏效果 -->
      <van-nav-bar title="编辑频道" />
      <!-- 头部导航栏效果 -->
      <channel-edit :userChannel="channels_list" :active="active" @add="addChannel" @del="delChannel" @changeTab="changeTab"/>
    </van-popup>
  </div>
</template>
<script>
//导入插件
import navbar from "../common/navbar";
import articleList from "../common/articleList";
import ChannelEdit from "../common/channelEdit.vue";
export default {
  components: {
    navbar,
    articleList,
    ChannelEdit,
  },
  data() {
    return {
      isShow: false,
      channels_list: [], //首页频道列表数据
      active:0,
    };
  },
  mounted() {
    //获取频道列表数据
    this.getChannels();
  },
  methods: {
    //获取用户频道的数据列表
    getChannels() {
      this.$axios.get("/v1_0/user/channels").then((res) => {
        console.log(res);
        //把获取到的数据赋值给channel_list即可
        this.channels_list = res.data.channels;
      });
    },

    //点击推荐添加频道到我的频道中
    addChannel(channel) {
      //把数据添加到channels_list
      this.channels_list.push(channel);

      //调用用户频道编辑的部分覆盖的接口地址
      this.$axios
        .patch("/v1_0/user/channels", {
          channels: [{ id: channel.id, seq: this.channels_list.length - 1 }],
        })
        .then((res) => {
          console.log(res);
        });
    },
    //删除点击我的频道的数据
    delChannel(channel){
      //通过传递过来的当前频道对象，找出他的索引值
      let index = this.channels_list.findIndex(item=>{
        return item.id == channel.id;
      })
      console.log(index);
      //把数据从我的频道中删除即可
      this.channels_list.splice(index,1);

      //调用删除指定用户的频道数据
      this.$axios.delete(`/v1_0/user/channels/${channel.id}`).then(res=>{
        console.log(res);
      })

    },
    //编辑频道点击的时候，切换频道
    changeTab(index){
      //索引赋值
      this.active = index;
      //关闭编辑的弹框数据
      this.isShow = false;
    }
  },
};
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  header {
    background: #3196fa;
    color: #fff;
    padding: 10px;
    box-sizing: border-box;
    .van-row {
      .van-col {
        text-align: center;
      }
    }
    .van-button {
      width: 200px;
      background: #5babfb;
      border: none;
      color: #fff;
    }
  }

  .nav-right {
    position: fixed;
    right: 0px;
    background: #fff;
  }
}
</style>
